<template>
	<view class="page page-image">
		<up-navbar
			placeholder
			:fixed="false"
			bgColor="transparent">
			<template #left>
				<view class="flex">
					<image class="square-50" src="@/static/images/public/logo.png"></image>
					<text class="m-l10 text-700-134">企服联聘</text>
				</view>
			</template>
		</up-navbar>

		<view class="p-h24">
			<SearchView />
			<BannerView />
			<NavigationView />
			<SuggestedView />
			<OfficeView />
		</view>
		<up-popup
			:show="interviewVisible"
			mode="center"
			bgColor="transparent"
			@close="interviewVisible = false">
			<InterviewView @close="interviewVisible = false" />
		</up-popup>
	</view>
</template>

<script lang="ts" setup>
	import { nextTick, onMounted, ref } from 'vue'
	import OfficeView from './components/office.vue'
	import SearchView from './components/search.vue'
	import BannerView from './components/banner.vue'
	import SuggestedView from './components/suggested.vue'
	import NavigationView from './components/navigation.vue'
	import InterviewView from './components/interview.vue'
	
	const interviewVisible = ref(false)
	
	onMounted(() => {
		nextTick(() => {
			interviewVisible.value = true
		})
	})
</script>

<style lang="scss" scoped>
	.page {
		width: 100%;
		min-height: 100%;
		background-color: $page-color-3;
		overflow: hidden;
	}
</style>